<template>
  <div class="item-detail flex column">
    <div class="item-title">榜单组件</div>
    <div class="item-content">
      <Form :model="detailData" :label-width="80">
        <FormItem label="主标题">
          <div class="input-wrapper">
            <Input style="width: 200px;"  v-model="detailData.label_name_cn" placeholder="请输入主标题"></Input>
          </div>
        </FormItem>
        <FormItem label="">
          <div class="flex center">
            <Button type="primary" ghost @click="add">添加新的榜单</Button>
            <p style="margin-left: 10px;font-size: 12px;color: gray;">建议背景图尺寸 670*890,新增图片需保存后进行预览。</p>
          </div>
        </FormItem>
      </Form>
    </div>
    <div class="banner-content-edit scroll" ref="bannerContentEdit">
      <draggable v-model="detailData.json" :options="dragOption">
        <transition-group>
          <div class="banner-content-item flex center" v-for="(item,index) in detailData.json" :key="'rankedit'+index">
            <div class="banner-img-wrapper">
              <div class="input-file-wrapper flex  center">
                <img v-if="item.image_url!=''" :src="item.image_url" />
                <div v-else style="font-size:14px;">点击添加图片</div>
                <input :name="index" type="file" accept="image/*" @change='handleFileChange'></input>
              </div>
            </div>
            <div class="banner-form-wrapper">
              <Form :model="item" :label-width="80">
              	<FormItem label="榜单类型">
                  <div class="flex center">
                    <Select v-model="item.rankType" @on-change="chageSel(item)" class="select-wrapper">
                      <Option value="goods">商品</Option>
                      <Option value="shop">企业</Option>
                    </Select>  
                  </div>
                </FormItem>

                <FormItem label="榜单名称">
                  <Input @on-focus="dragOption.disabled = true" @on-blur="dragOption.disabled = false"  style="width: 200px;"  v-model="item.title" placeholder="请输入榜单名称"></Input>
                </FormItem>

                <FormItem :label="item.rankType=='goods'?'商品':'企业'">
                  <Input style="width: 200px;" v-if="item.rankType!=''" v-model="item.goods" @click.native="tapInput(index,item)" :placeholder="item.rankType=='goods'?'选择5-10个商品':'选择5-10个企业'"></Input>
                </FormItem>
                
              </Form>
            </div>
            <div class="icon-wrapper" @click="delBanner(index)">
              <Icon type="ios-trash-outline" />
            </div>
          </div>
        </transition-group>
      </draggable>
    </div>


     <goodsSelect buyMode="-9" @confirm="commitGoodsFn" :selectNum="10" ref="goodsModal" :goodsIdStr="goodsIdStr"></goodsSelect>

     <!-- 企业选择器 -->
     <shop-select ref="shopselect" @commitShopFn="commitShopFn"></shop-select>
   
  </div>
</template>
<script>

import { uploadImage } from 'api/uploadImage'

// 商品选择器组件
import goodsSelect from 'base/goods-select/goods-select'
// 企业选择器
import shopSelect from 'base/shopSelect/shopSelect'

import draggable from 'vuedraggable'

export default {
  name: 'RankDetail',
  props: {
    /**
     * @description 起始值，即动画开始前显示的数值
     */
    detailData: {
      
    },
  },
  data() {
    return {
      dragOption: {
          animate: 150,
          disabled: false
      },
      // item索引
      selectIndex: 0
	  }
  },
  computed: {
    goodsIdStr: function() {
      if (this.detailData.json.length>0) {
        if (this.detailData.json.length == 1) {
          this.selectIndex = 0;
          return this.detailData.json[this.selectIndex].goods
        } else {
          return this.detailData.json[this.selectIndex].goods;
        }
      } else {
        return "";
      }
    }
  },
  methods: {

    tapInput(index,item) {
      this.selectIndex = index;
      if (item.rankType == "goods") {
        this.openGoodsSelectFn();
      } else {
          this.$refs.shopselect.openFn(item.goods.length>0?item.goods.split(","):[]);
      }
    },

    // 打开商品选择器
    openGoodsSelectFn(){
        this.$refs.goodsModal.show()
    },

    // 选中商品回调
    commitGoodsFn(_id){
        this.detailData.json[this.selectIndex].goods = _id;
    },

    // 企业选中回调
    commitShopFn(arr){
        var shops = "";
        for (var i = 0; i < arr.length; i++) {
           shops += arr[i].shop_id;
           if (i<(arr.length-1)) {
             shops += ",";
           }
        }
        this.detailData.json[this.selectIndex].goods = shops;
    },


    // 处理图片
    handleFileChange (event) {
      var that = this;
      uploadImage(event.target.files[0]).then(imgUrl => {
          that.detailData.json[event.target.name].image_url = imgUrl;
      }).catch(err => {
          that.$Message.error(err);  
      })  
    },

    // 添加轮播
    add(){
      var _rank = {
    		image_url:"",
    		name: "榜单名称",
    		rankType: 'goods',
    		goods: '',
      }
      if(typeof this.detailData.json != 'object') this.detailData.json=[];
      this.detailData.json.push(_rank);
      this.$Message.success("添加成功，请编辑详细内容");
      var that = this;
      setTimeout(function(){
        that.$refs.bannerContentEdit.scrollTop = that.$refs.bannerContentEdit.scrollHeight; 
      },250)
    },

    // 删除轮播
    delBanner(index) {
      this.selectIndex = index == 0 ? 0 : (index-1);
      this.detailData.json.splice(index,1);
    },

    /*
    * 选择器
    */
    chageSel(_item){
      _item.goods = "";
    },
    
  },
  components: {
  	draggable,goodsSelect,shopSelect
  }
}

</script>

<style scoped>
@import url("../baseModule.less");

/*轮播编辑开始*/
.banner-content-edit {
	flex: 1;
	padding: 16px 16px 16px 24px;
	padding-top: 0;
}
.banner-img-wrapper {
	width: 180px;
	min-width: 180px;
    height: 120px;
    padding: 5px;
    border: 1px solid #f2f2f2;
}
.banner-content-item {
	padding: 16px 0;
    border-top: 1px solid #f2f2f2;

}
.banner-form-wrapper {
    margin: 0 16px 0 12px;
    flex: 1;
}

/*上传图片控件*/
.input-file-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	justify-content: center;
}
.input-file-wrapper img {
	width: 100%;
	height: 100%;
}
.input-file-wrapper input {
	position: absolute;
	left: 0;
	width: 100%;
	bottom: 0; top: 0;
	opacity: 0;
}
.icon-wrapper {
	min-width: 50px;
    width: 50px;
    height: 50px;
    background: #f2f2f2;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    display: flex;
    align-items: center;
	justify-content: center;
}

</style>
